<!-- 投资主体组件 -->
<template>
  <div class="skyEyeCheckAuto">
    <el-autocomplete
      ref="input"
      v-model="label"
      :fetch-suggestions="investmentQuerySearch"
      :placeholder="$t(placeholder)"
      :trigger-on-focus="false"
      :value="svalue"
      :clearable="clearable"
      value-key="shortName"
      @select="investmentHandleSelect"
      @change="gainValue"
      @mouseover="clearShow('mouseover')"
      @mouseleave="clearShow('mouseleave')"
    >
      <template>
        <i v-if="clearable && showClear" slot="suffix" class="el-icon-circle-close el-input__icon" style="cursor: pointer" @click="clear" />
      </template>
    </el-autocomplete>
  </div>
</template>

<script>
  import { listDealInvestmentByInvestName } from '@/api/deal/investment/dealInvestment'
  export default {
    props: {
      value: {
        type: String,
        default: ''
      },
      placeholder: {
        type: String,
        default: () => '请输入'
      },
      clearable: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        // 公司名称
        svalue: '',
        // 查询条件
        query: {},
        label: '',
        tycError: {
          code: 500
        },
        showClear: false
      }
    },
    watch: {
      value: {
        handler(svalue, oldVal) {
          if (svalue !== oldVal) {
            if (svalue) {
              this.svalue = svalue
            } else {
              this.svalue = ''
              this.label = ''
            }
          }
        },
        deep: true,
        immediate: true
      },
      svalue: {
        handler(svalue) {
          if (svalue) {
            this.svalue = svalue
          }
          this.$emit('input', this.svalue)
        },
        deep: true,
        immediate: true
      }
    },
    created() {

    },
    mounted() {
    },
    methods: {
      clearShow(type) {
        console.log(type)
        if (this.label && type === 'mouseover') {
          this.showClear = true
        } else {
          this.showClear = false
        }
      },
      clear() {
        this.$refs.input.$children[0].clear()
      },
      // 投资主体查询
      investmentQuerySearch(queryString, cb) {
        listDealInvestmentByInvestName(queryString).then(res => {
          if (res.code === 200) {
            this.$emit('change', queryString)
            this.$emit('input', queryString)
            cb(res.data)
          }
        })
      },
      // 投资主体选择后事件
      investmentHandleSelect(item) {
        this.svalue = item.investorId
        this.label = item.shortName || item.investorName

        this.$emit('change', this.svalue)
        this.$emit('input', this.svalue)
      },
      gainValue() {
        if (!this.label) {
          this.$emit('input', '')
          this.$emit('change', '')
        }
      }
    }
  }
</script>

<style scoped>

</style>
